﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>table</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .h {
            line-height: 20px;
        }

        .c {
            zoom: 1;
        }

            .c:after {
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }

        .l {
            float: left;
        }

        .r {
            float: right;
        }

        ul {
            list-style: none;
        }

        .demo {
            width: 832px;
            height: 400px;
            font-size: 12px;
            margin: 20px auto;
            position: relative;
        }

            .demo .m_a {
                margin-right: 8px;
            }

            .demo .nobreak {
                white-space: keep-all;
                *white-space: normal;
                text-overflow: ellipsis;
                overflow: hidden;
                height: 22px;
                width: 100%;
            }

            .demo .container {
                border: 1px solid #99bbe8;
                height: auto;
            }

            .demo .i_a {
                border: 1px solid #ccc;
                margin-top: 2px;
            }

            .demo .t_a {
                border-left: 1px solid #99bbe8;
                border-bottom: 1px solid #99bbe8;
            }

                .demo .t_a td {
                    background-color: #fff;
                    border-right: 1px solid #ccc;
                    border-top: 1px solid #ccc;
                }

            .demo table td {
                line-height: 22px;
                height: 20px;
            }

            .demo table thead .theadfocus {
                background: url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -163px;
            }

            .demo table thead td {
                overflow: hidden;
            }

            .demo .t_a tbody td {
                padding-left: 8px;
            }

            .demo .title {
                height: 24px;
                line-height: 22px;
                font-weight: bold;
                padding-left: 20px;
                color: #666666;
                background: url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -300px;
            }

            .demo .bar {
                _display: inline-block;
                line-height: 20px;
                height: 20px;
                border-top: 1px solid #99bbe8;
                background: url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -350px;
                padding: 2px 0 2px 20px;
            }

            .demo .f_a {
                color: #3b526e;
                font-weight: bold;
            }

            .demo .first_div, .demo .prev_div, .demo .next_div, .demo .last_div, .demo .first_div_no, .demo .prev_div_no, .demo .next_div_no, .demo .last_div_no {
                float: left;
                width: 18px;
                height: 16px;
                margin-top: 3px;
                cursor: pointer;
                display: block;
                margin-right: 5px;
                background: url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat;
            }

            .demo .first_div {
                background-position: -12px -58px;
            }

            .demo .first_div_no {
                background-position: 4px -58px;
                cursor: normal;
            }

            .demo .prev_div {
                background-position: -11px -78px;
            }

            .demo .prev_div_no {
                background-position: 5px -78px;
                cursor: normal;
            }

            .demo .next_div {
                background-position: -65px -78px;
            }

            .demo .next_div_no {
                background-position: -49px -78px;
                cursor: normal;
            }

            .demo .last_div {
                background-position: -67px -58px;
            }

            .demo .last_div_no {
                background-position: -51px -58px;
                cursor: normal;
            }

            .demo .rowfocus td {
                background-color: #ebf2fb;
            }

            .demo .delbtn, .demo .delbtn:hover {
                background: url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat;
                width: 45px;
                text-align: center;
                height: 20px;
                color: #333;
                display: block;
                text-decoration: none;
                float: left;
            }

            .demo .delbtn {
                background-position: -55px 0;
            }

                .demo .delbtn:hover {
                    background-position: -55px -30px;
                    color: #666;
                }

            .demo table {
                font-size: 12px;
                table-layout: fixed;
                -moz-user-select: -moz-none;
                -webkit-user-select: none;
                -khtml-user-select: none;
            }

            .demo .tabcontainer {
                width: 99%;
                overflow: auto;
                padding: 2px 0 0 2px;
                background-color: #FFFBF7;
                position: relative;
            }

            .demo table thead td {
                background: url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -100px;
            }

            .demo table thead a {
                z-index: 1000;
                background-color: #C3DAF9;
                background-image: url("http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png");
                display: none;
                width: 12px;
                height: 22px;
                background-position: 0 -234px;
                position: absolute;
                top: 0;
                right: 0;
            }

            .demo table thead div {
                position: relative;
                z-index: 1;
            }

            .demo table thead p {
                width: 1px;
                height: 22px;
                background-color: #99BBE8;
                float: left;
                display: block;
                cursor: e-resize;
                margin-right: 2px;
            }

            .demo table tr.trfocus td {
                background-color: #ebf2fb;
            }

            .demo div table, .demo div table tr, .demo div table tr td {
                -moz-user-select: -moz-none;
                -webkit-user-select: none;
            }

            .demo table tr td {
                background-color: #fff;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .demo .loading {
                position: absolute;
                z-index: 9999;
                left: 0;
                top: 0;
                background: #e5e5e5;
                filter: Alpha(opacity=50);
                opacity: 0.5;
                -moz-opacity: 0.5;
                -khtml-opacity: 0.5;
            }

            .demo .loaddiv {
                position: absolute;
                z-index: 99999;
                width: 98px;
                height: 28px;
                border: 1px solid #6593cf;
                background: #fff url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -300px;
                padding: 2px;
            }

            .demo .loadgif {
                background: #fff url(images/loading_small.gif) no-repeat 4px 5px;
                padding: 5px 0 0 27px;
                width: 68px;
                height: 21px;
                border: 1px solid #6593cf;
            }

            .demo .loadtext {
                color: #000;
            }

            .demo .edittable {
                border: 1px solid #c4c4c4;
            }

                .demo .edittable td {
                    background: #ebf2fb;
                    height: 24px;
                }

            .demo .editbtn {
                padding: 5px;
                width: 100px;
                margin: 0 auto;
                background: #ebf2fb;
                border: 1px solid #c4c4c4;
                border-top: none;
            }

            .demo .delbtn, .ajaxTable .delbtn:hover {
                background: url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat;
                width: 45px;
                text-align: center;
                height: 20px;
                color: #333;
                display: block;
                text-decoration: none;
                float: left;
            }

            .demo .delbtn {
                background-position: -55px 0;
            }

                .demo .delbtn:hover {
                    background-position: -55px -30px;
                    color: #666;
                }

            .demo .btn_a, .ajaxTable .btn_a:hover {
                cursor: pointer;
                background: url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat;
                text-align: center;
                padding-top: 5px;
                width: 45px;
                height: 17px;
                display: block;
                float: left;
                cursor: pointer;
                text-decoration: none;
            }

            .demo .btn_a {
                background-position: 0 0;
                color: #333;
            }

                .demo .btn_a:hover {
                    background-position: 0 -30px;
                    color: #666;
                }

        .sort-asc .head_span {
            height: 12px;
            width: 24px;
            display: block;
            float: left;
            padding-right: 18px;
            background: url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat right -423px;
        }

        .head_span {
            float: left;
            line-height: 22px;
            display: block;
        }

        .sort-desc .head_span {
            height: 12px;
            width: 24px;
            display: block;
            float: left;
            padding-right: 18px;
            background: url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat right -391px;
        }

        .x-menu {
            position: absolute;
            background: url(menu.gif) repeat-y #f0f0f0;
            border: 1px solid #718bb7;
            width: 134px;
            display: none;
        }

            .x-menu .disabled a {
                color: #999;
            }

        .x-menu-list {
            padding: 2px;
            overflow: hidden;
            margin: 0;
        }

            .x-menu-list li {
                padding: 1px;
                white-space: nowrap;
                height: 20px;
            }

                .x-menu-list li.focus {
                    backround: #09F;
                }

        a.x-menu-item {
            display: block;
            cursor: pointer;
            line-height: 18px;
            height: 20px;
            outline-color: -moz-use-text-color;
            outline-style: none;
            outline-width: 0;
            width: 100px;
            padding-left: 27px;
            position: relative;
            text-decoration: none;
            white-space: nowrap;
            font-size: 12px;
            color: #222;
        }

        a.x-m_a {
            padding-left: 8px;
            width: 120px;
        }

        a.x-menu-item input {
            margin-right: 8px;
        }

        a.x-menu-item:hover {
            background-color: #d9e8fb;
        }

        .asc {
            background: url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat -53px -218px;
        }

        .desc {
            background: url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat -53px -243px;
        }

        .columns {
            background: url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat -53px -268px;
        }

        .submenu {
            position: absolute;
            z-index: 1500;
            background: #f0f0f0;
            border: 1px solid #718bb7;
            width: 134px;
            display: none;
        }

        .x-menu-list .child-menu {
            background: url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat right -444px;
        }

        a.x-m_a {
            padding-left: 8px;
            width: 120px;
        }

        a.x-menu-item input {
            margin-right: 8px;
        }

        a.x-menu-item:hover {
            background-color: #d9e8fb;
        }

        .line {
            width: 1px;
            background-color: #cccccc;
            position: absolute;
            display: none;
            z-index: 100;
        }

        .red {
            color: #FF0000;
        }

        .greed {
            color: #33FF00;
        }
    </style>
</head>
<body>
    1.排序 自定义排序方式
    <br>
    2.编辑
    <br>
    3.拖拽
    <br>
    4.分页
    <br>
    5.单选 多选(ctrl) 线性选(shift)
    <br>
    6.文字render  就是给文字着色  比如 大于0红色  小于0绿色
    <br>
    7.对列的显示隐藏
    <br>
    8.分组
    <br>
    <div id='demo' class='demo'></div>
    <br><br>下面是分组的  且有一个自定义排序方式  很好 一般 很差<br><br>
    <div id='demo1' class='demo'></div>
    <script type="text/javascript">
        (function (doc, undefined) {
            var win = this;
            win.Sys = function (ua) {
                var b = {
                    ie: /msie/.test(ua) && !/opera/.test(ua),
                    opera: /opera/.test(ua),
                    safari: /webkit/.test(ua) && !/chrome/.test(ua),
                    firefox: /firefox/.test(ua),
                    chrome: /chrome/.test(ua)
                }, vMark = "";
                for (var i in b) {
                    if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
                }
                b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";
                b.ie6 = b.ie && parseInt(b.version, 10) == 6;
                b.ie7 = b.ie && parseInt(b.version, 10) == 7;
                b.ie8 = b.ie && parseInt(b.version, 10) == 8;
                return b;
            }(win.navigator.userAgent.toLowerCase());

            win.Sys.ie6 && doc.execCommand("BackgroundImageCache", false, true);

            win.$$ = function (id) {
                return typeof id === 'string'
                 ? doc.getElementById(id)
                 : id;
            };
            win.$q = function (name, parent) {
                return parent.getElementsByTagName(name);
            }
            win.$c = function (name, parent) {
                var elem = typeof name === 'object' ? name : doc.createElement(name);
                parent && parent.appendChild(elem);
                return elem;
            };

            win.addListener = function (element, e, fn) {
                !element.events && (element.events = {});
                element.events[e] && (element.events[e][addListener.guid++] = fn) || (element.events[e] = { '0': fn });
                element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn);
            };
            win.addListener.guid = 1;
            win.removeListener = function (element, e, fn) {
                var handlers = element.events[e], type;
                if (fn) {
                    for (type in handlers)
                        if (handlers[type] === fn) {
                            element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn);
                            delete handlers[type];
                        }
                } else {
                    for (type in handlers) {
                        element.removeEventListener ? element.removeEventListener(e, handlers[type], false) : element.detachEvent("on" + e, handlers[type]);
                        delete handlers[type];
                    }
                }
            };
            win.fireEvent = function (element, eventName) {
                if (element[eventName]) {
                    element[eventName]();
                } else if (element.fireEvent) {
                    element.fireEvent('on' + eventName);
                } else if (doc.createEvent) {
                    var evt = doc.createEvent("MouseEvents");
                    evt.initEvent(eventName, true, true);
                    element.dispatchEvent(evt);
                }
            };
            win.setStyle = function (elems, style, value) {
                if (!elems.length) elems = [elems];
                if (typeof style == "string") {
                    style = value === undefined ? { cssText: style } : (function (o) {
                        return (o[style] = value, o);
                    })({});
                };
                each(elems, function (i, elem, style) {
                    var value, name, ie = Sys.ie;
                    for (name in style) {
                        value = style[name];
                        if (name === "opacity" && ie) {
                            elem.style.filter = (elem.currentStyle.filter || "").replace(/alpha\([^)]*\)/, "") + "alpha(opacity=" + value * 100 + ")";
                        } else if (name === "float") {
                            elem.style[ie ? "styleFloat" : "cssFloat"] = value;
                        } else {
                            name = name.replace(/-([a-z])/ig, function (all, letter) {
                                return letter.toUpperCase();
                            });
                            elem.style[name] = value;
                        }
                    }
                }, style);
            };
            win.setAttr = function (dom, attr) {
                if (typeof attr !== 'object')
                    return;
                for (var name in attr)
                    dom.setAttribute(name, attr[name]);
            }

            var slice = Array.prototype.slice;
            win.bind = function (object, fun) {
                var args = slice.call(arguments).slice(2);
                return function () {
                    return fun.apply(object, args);
                };
            };

            win.bindAsEventListener = function (object, fun, args) {
                var args = slice.call(arguments).slice(2);
                return function (event) {
                    return fun.apply(object, [event || win.event].concat(args));
                }
            };
            win.extend = function () {
                var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options;
                if (typeof target === "boolean") {
                    deep = target;
                    target = arguments[1] || {};
                    i = 2;
                }
                if (typeof target !== "object" && Object.prototype.toString.call(target) != "[object Function]")
                    target = {};
                for (; i < length; i++) {
                    if ((options = arguments[i]) != null)
                        for (var name in options) {
                            var src = target[name], copy = options[name];
                            if (target === copy)
                                continue;
                            if (deep && copy && typeof copy === "object" && !copy.nodeType) {
                                target[name] = arguments.callee(deep, src || (copy.length != null ? [] : {}), copy);
                            }
                            else if (copy !== undefined)
                                target[name] = copy;
                        }
                }
                return target;
            };

            win.Class = function (properties) {
                var _class = function () {
                    return (arguments[0] !== null && this.initialize && typeof (this.initialize) == 'function')
                     ? this.initialize.apply(this, arguments)
                     : this;
                };
                _class.prototype = properties;
                return _class;
            };
            win.each = function (object, callback, args) {
                var name, i = 0, length = object.length;
                if (args) {
                    args = Array.prototype.slice.call(arguments).slice(2);
                    if (length === undefined) {
                        for (name in object)
                            if (callback.apply(object[name], [name, object[name]].concat(args)) === false)
                                break;
                    } else
                        for (; i < length; i++)
                            if (callback.apply(object[i], [i, object[i]].concat(args)) === false)   //
                                break;
                } else {
                    if (length === undefined) {
                        for (name in object)
                            if (callback.call(object[name], name, object[name]) === false)
                                break;
                    } else
                        for (var value = object[0];
                         i < length && callback.call(value, i, value) !== false; value = object[++i]) { }
                }
                return object;
            };
            win.currentStyle = function (element) {
                return element.currentStyle || doc.defaultView.getComputedStyle(element, null);
            };
            win.objPos = function (elem) {
                var left = 0, top = 0, right = 0, bottom = 0, doc = elem ? elem.ownerDocument : doc;
                if (!elem.getBoundingClientRect || win.Sys.ie8) {
                    var n = elem;
                    while (n) { left += n.offsetLeft, top += n.offsetTop; n = n.offsetParent; };
                    right = left + elem.offsetWidth; bottom = top + elem.offsetHeight;
                } else {
                    var rect = elem.getBoundingClientRect();
                    left = right = doc.documentElement.scrollLeft || doc.body.scrollLeft;
                    top = bottom = doc.documentElement.scrollLeft || doc.body.scrollLeft;
                    left += rect.left; right += rect.right;
                    top += rect.top; bottom += rect.bottom;
                }
                return { "left": left, "top": top, "right": right, "bottom": bottom };
            };
            win.contains = function (k, j) {
                return document.compareDocumentPosition
                 ? k.compareDocumentPosition(j) & 16
                 : k !== j && k.contains(j);
            };
            win.hasClass = function (element, className) {
                return element.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
            };
            win.addClass = function (element, className) {
                if (!win.hasClass(element, className))
                    element.className.replace(/\s/g, '') === ''
                     ? element.className = className
                     : element.className += " " + className;
            };
            win.removeClass = function (element, className) {
                win.hasClass(element, className) && (element.className = element.className.replace(new RegExp('(\\s*|^)' + className + '(\\s*|$)'), ' '));
            }
        })(document);
        (function (doc, undefined) {
            var win = this,
             uuid = -1;
            /*
             检查 字符串 中是否有key
             如果有 且key后面是-  返回-后面的东西 否则返回true
             检测不到返回false
            */
            function checkReg(str, key) {
                var reg = new RegExp('(?:^|\\s)' + key + '\\b-?(.*?)(?:\\s|$)', 'i');
                if (reg.exec(str) != null) {
                    return RegExp.$1 === '' ? true : RegExp.$1;
                } else {
                    return false;
                }
            };
            /*
             修改字符串中key对应的value
            */
            function modify(str, key, value) {
                var reg = new RegExp('(^|\\s)(' + key + '\\b-).*?(\\s|$)', 'i');
                return str.replace(reg, '$1$2' + value + '$3');
            };
            win.easyGrid = new Class({
                options: {
                    perPage: 10,
                    currPage: 0,
                    totalPage: 0,
                    count: 10,
                    page: 0,
                    isEdit: false,
                    widthConfig: {
                        td: null,
                        prevTd: null,
                        x: 0,
                        tdWidth: 0,
                        prevWidth: 0
                    },
                    cellMinWidth: 50,
                    sortType: {
                        int: function (v) { return parseInt(v) },
                        float: function (v) { return parseFloat(v) },
                        date: function (v) { return v.toString() },
                        string: function (v) { return v.toString() }
                    },
                    title: '标题'
                },
                initialize: function (options) {
                    var op = extend(true, {}, this.options),
                     options = this.defaults = extend(op, options),
                     container = this.container = $c('div', options.container),
                     dataConfig = options.dataConfig,
                     title = $c('div', container);
                    container.className = 'container';
                    title.innerHTML = options.title;
                    title.className = 'title';
                    this.primaryKey = options.primaryKey;
                    this.top = $c('div', container);
                    this.top.className = 'bar';
                    this.top.innerHTML = '<div class="c"><a  href="javascript:;" class="first_div_no" page="start"></a><a href="javascript:;" class="prev_div_no" page="next"></a><div class="br"></div><div class="l m_a"><input type="text" style="width:40px" class="i_a" /></div><div class="br"></div><a href="javascript:;" class="next_div" page="pre"></a><a href="javascript:;" class="last_div" page="end"></a><div class="br"></div><a href="javascript:;" class="delbtn m_a" go="go">跳转</a><a href="javascript:;" class="delbtn" del="del">删除</a><div class="r m_a">当前第<span class="f_a"></span>页　总共<span class="f_a"></span>页　一页<span class="f_a"></span>条数据　共<span class="f_a"></span>条数据</div></div>';
                    var tabContainer = this.tabContainer = $c('div', container);
                    this.bottom = $c(this.top.cloneNode(true), container);
                    tabContainer.className = 'tabcontainer';
                    tabContainer.style.height = ~~options.container.offsetHeight - 83 + 'px';
                    var table = this.table = $c('table', tabContainer);
                    table.className = 't_a';
                    setAttr(table, { cellpadding: "0", cellspacing: "0", border: "0" });
                    this.thead = $c('thead', table);
                    this.tbody = $c('tbody', table);
                    this.tbody.style.display = 'none';
                    //loading条
                    this.loading_bg = $c('div', container);
                    this.loading_bg.className = 'loading';
                    setStyle(this.loading_bg, {
                        width: container.offsetWidth + 2 + 'px',
                        height: container.offsetHeight + 2 + 'px'
                    });

                    this.loading = $c('div', container);
                    this.loading.className = 'loaddiv'
                    setStyle(this.loading, {
                        left: (container.offsetWidth / 2 - 45) + 'px',
                        top: (container.offsetHeight / 2 - 14) + 'px'
                    });
                    this.loading.innerHTML = '<div class="loadgif">Loading...</div>';

                    //表格有多少列
                    this.colCount = options.fields.length;
                    // 数据源 形式是 [[],[],[],[],[],[]]
                    this.data = [];
                    // 当前请求到的数据源中  所有的分组头 形式是 [trdom1,trdom2]
                    this.grouphead = [];
                    //记录已经插入table的分组的tr      [tr1,tr2,tr3]
                    this.insertTrs = [];
                    //列索引
                    //形式 [[td11,td12,td13,td14],[td21,td22,td23,td24]]
                    this.columns = [];

                    //true表示正序 false表示反序
                    this.ascSort = true;

                    //保存哪一列正在排序中的表头td
                    this.sortColumn = '';

                    //所有tr行  如果没有分组 形式是[tr1,tr2,tr3,tr4]
                    //如果有分组  [[tr1,tr2,tr3,tr4],[tr5,tr6,tr7,tr8]]
                    this.rows = [];

                    //一级菜单
                    this.popMenu = $c('div', doc.body);
                    this.popMenu.className = 'x-menu';
                    this.popMenu.innerHTML = '<ul class="x-menu-list"><li><a href="javascript:;" class="x-menu-item asc" menuType="asc">升序</a></li><li><a href="javascript:;" class="x-menu-item desc" menuType="desc">降序</a></li><li><a href="javascript:;" class="x-menu-item columns" menuType="columns">所有列</a></li></ul>';

                    // 创建子菜单
                    this.subPopMenu = $c('div', doc.body);
                    this.subPopMenu.className = 'submenu';

                    //表头的第一级弹出层是否打开 如果打开  保存 该td
                    this.isMenuOpen = false;

                    //保存列所有列中 某一列是否显示 或隐藏 num为计数器 看有多少列是现实中的
                    //格式   clos: [ true,false,true,true] 1,3,4列显示  第2列隐藏
                    this.isShowTrs = {
                        num: 0,
                        clos: []
                    };

                    // 创建拖动时显示的基准线
                    this.line = $c('div', doc.body);
                    this.line.className = 'line';

                    //保存行
                    //属性为uuid的递增量如 {1:dom,2:dom}
                    this.selectedRows = {};

                    // 保存最后选中的行
                    this.lastSelectRow = { dom: null, index: null };

                    this.currentEditRow = { index: 0, dom: null };
                    this.editData = [];
                    this.editForm = $c('div', tabContainer);;
                    setStyle(this.editForm, {
                        position: 'absolute',
                        display: 'none',
                        'z-index': '120'
                    });
                    this.editTable = $c('table', this.editForm);
                    setAttr(this.editTable, {
                        cellspacing: '0',
                        cellpadding: '0',
                        border: '0'
                    });
                    var btnC = $c('div', this.editForm);
                    btnC.className = 'editbtn';
                    btnC.style.textAlign = 'center';
                    btnC.innerHTML = '<div class="c"><a class="btn_a m_a" do="submit" href="javascript:;">提交</a><a class="btn_a" do="cancel" href="javascript:;">取消</a></div>';
                    this.editTable.className = 'edittable';
                    var etr = $c('tr', $c('tbody', this.editTable));

                    //创建一个 tr 的副本  因为后面生成tr的时候 可以直接复制节点
                    this.copyTr = $c('tr');
                    this.groupTr = $c('tr');
                    this.groupTr.setAttribute('g', 'y');
                    var ctd = $c('td', this.groupTr)
                    ctd.setAttribute('colSpan', options.fields.length);

                    var theadTr = $c('tr', this.thead),
                     tWidth = 0,
                     self = this,
                     ul = $c('ul', this.subPopMenu),
                     li;
                    each(options.fields, function (i, o) {
                        var td = $c('td', theadTr),
                         width = o.width ? o.width : '80',
                         div = i === 0 ? '<div class="c nobreak">' : '<div class="c nobreak"><p></p>';
                        td.innerHTML = [div, '<span class="head_span">', o.name, '</span><a href="javascript:;"></a></div>'].join('');
                        setAttr(td, { clos: i, width: width, unselectable: 'on', 'class': o.type === undefined ? '' : 'type-' + o.type });
                        self.createInput(i, o, etr);
                        tWidth = tWidth + (~~width);
                        li = $c('li', ul);
                        li.innerHTML = [
                         '<a href="javascript:;" class="x-menu-item x-m_a" ><input type="checkbox" checked="true"  cols="',
                         i,
                         '"/>',
                         o.name,
                         '</a>'
                        ].join('');

                        //生成列索引 的  每列的第一项
                        self.columns[i] = [td];
                        $c('td', self.copyTr).setAttribute('unselectable', 'on');
                        //计算出 所显示的列索引 和 一共多少列num
                        self.isShowTrs.num++;
                        self.isShowTrs.clos[i] = true;
                    });

                    setAttr(this.table, { width: tWidth + options.fields.length + 1 })

                    //生成tbody里面的tr 只是生成 tr 根据perPage生成 它是显示当前一共有多少条数据的配置项
                    var i = 0,
                     trsLen = options.perPage,
                     frag = doc.createDocumentFragment(),
                     arr = new Array(options.fields.length),
                     tr,
                     tds;
                    for (; i < trsLen; i++) {
                        tr = this.copyTr.cloneNode(true);
                        tds = $q('td', tr);
                        each(arr, function (i) {
                            //生成列索引的所有项
                            self.columns[i].push(tds[i]);
                        });
                        $c(tr, frag);
                    }
                    this.tbody.appendChild(frag);
                    if (typeof dataConfig === 'object') {
                        setTimeout(function () { self.getDataCallBack(dataConfig); }, 5);
                    } else {

                    }
                    /*
                     表格拖拽
                     表格排序
                     等一些操作
                    */
                    addListener(this.thead, 'click', bindAsEventListener(this, this.sortTable));
                    addListener(this.thead, 'mouseover', bindAsEventListener(this, this.theadOver));
                    addListener(this.thead, 'mouseout', bindAsEventListener(this, this.theadOut));
                    addListener(this.thead, 'mousedown', bindAsEventListener(this, this.dragWidth));

                    /*
                     绑定弹出层click事件  进行排序
                     第2级菜单绑定  进行对列隐藏 显示
                    */
                    addListener(this.popMenu, 'click', bindAsEventListener(this, this.menuClick));
                    addListener(this.popMenu, 'mouseover', bindAsEventListener(this, this.menuOver));
                    addListener(this.subPopMenu, 'click', bindAsEventListener(this, this.subMenuClick));

                    /*
                     放上去表格行的内容变粗
                    */
                    addListener(this.tbody, 'mousemove', bindAsEventListener(this, this.rowHighlight, true));
                    addListener(this.tbody, 'mouseout', bindAsEventListener(this, this.rowHighlight, false));
                    addListener(this.tbody, 'mousedown', bindAsEventListener(this, this.selectRow, false));
                    addListener(this.tbody, 'dblclick', bindAsEventListener(this, this.editRow, false));

                    addListener(btnC, 'click', bindAsEventListener(this, this.modifyTr));

                    addListener(this.top, 'click', bindAsEventListener(this, this.pageBarClick));
                    addListener(this.bottom, 'click', bindAsEventListener(this, this.pageBarClick));
                },
                getDataCallBack: function (data) {
                    var options = this.defaults,
                     self = this,
                     totla = 0;

                    this.data.length = 0;

                    if (data.data) {
                        if (data.data[0].groupName) {
                            var grouphead = this.grouphead;
                            grouphead.length = 0;

                            each(data.data, function (i, o) {
                                var gtr = self.groupTr.cloneNode(true);
                                $q('td', gtr)[0].innerHTML = o.groupName;
                                grouphead.push(gtr);
                                each(o.rows, function (j, d) {
                                    //this.data中数据的最后一项是 索引
                                    d.push(i);
                                    self.data.push(d);
                                });
                            });
                            this.showGroup = true;
                        } else {
                            each(data.data, function (i, o) {
                                self.data.push(o);
                            });
                            this.showGroup = false;
                        }
                    } else {
                        return;
                    }
                    total = data.total
                      ? data.total >= this.data.length
                       ? data.total
                       : this.data.length
                      : this.data.length;
                    this.writeMessage(total);
                    this.buildTbody(options.currPage);
                },
                buildTbody: function (pageNum) {
                    if (this.data.length === 0) {
                        this.tbody.style.display = 'none';
                        return;
                    }

                    var i = 0,
                     j = 0,
                     self = this,
                     data = this.data,
                     options = this.defaults,
                     trsLen = options.perPage,
                     tdsLen = options.fields.length,
                     tbody = this.tbody,
                     trs = tbody.getElementsByTagName('tr'),
                     start = pageNum * options.perPage,
                     tr;
                    this.rows.length = 0;

                    if (this.showGroup) {
                        var group = {},
                         index,
                         arr = [],
                         insertTrs = this.insertTrs;

                        //清除掉之前插入的 分组tr
                        insertTrs.length != 0 && each(insertTrs, function (i, o) {
                            self.tbody.removeChild(o);
                        });
                        insertTrs.length = 0;

                        //遍历填充数据 给this.rows赋值
                        var num = -1;
                        for (; i < trsLen; i++) {
                            tr = trs[i];

                            //如果没有数据了  就开始隐藏剩下的行
                            if (!data[i + start]) {
                                tr.style.display = 'none';
                                continue;
                            }

                            //做标记 tr 里面的内容对应data中哪条数据
                            tr.setAttribute('dataIndex', i + start);
                            tr.style.display = 'block';
                            tds = tr.getElementsByTagName('td');
                            //x为 分组的不同组的标识
                            var x = data[i + start][data[i + start].length - 1];
                            //用来判断后来的数据和之前的数据是不是同一个组的
                            //如果是同一个组的 选this.rows的最后一列添加
                            //不是同一个组的创建一列添加

                            num == x
                             ? this.rows[this.rows.length - 1].push(tr)
                             : (this.rows[this.rows.length] = [tr], num = x);

                            //用数组arr 记住每个分组的的第一个tr的位置 因为后面要插入tr头  i为位置 num为分组的序号
                            !(num in group) && (group[num] = i + start, arr.push([num, i]));
                            for (j = 0; j < tdsLen; j++) {
                                td = tds[j];
                                var txt = data[i + start][j] === '' ? ' ' : data[i + start][j];
                                render = options.fields[j].render;
                                td.innerHTML = render
                                 ? render(txt)
                                 : txt;
                            }
                            tr.style.display = '';
                        }

                        each(arr.reverse(), function (i, o) {
                            insertTrs.push(self.grouphead[o[0]]);
                            self.tbody.insertBefore(self.grouphead[o[0]], trs[o[1]]);
                        });

                    } else {
                        for (; i < trsLen; i++) {
                            tr = trs[i];
                            //做标记 tr 里面的内容对应data中哪条数据
                            tr.setAttribute('dataIndex', i + start);
                            this.rows.push(tr);
                            //没有数据的tr隐藏掉
                            if (!data[i + start]) {
                                tr.style.display = 'none';
                                continue;
                            }
                            tr.style.display = '';
                            tds = $q('td', tr);

                            for (j = 0; j < tdsLen; j++) {
                                var txt = data[i + start][j] === '' ? ' ' : data[i + start][j];
                                render = options.fields[j].render;
                                tds[j].innerHTML = render
                                 ? render(txt)
                                 : txt;
                            }
                        }
                    }

                    options.currPage = pageNum;
                    this.top.getElementsByTagName('span')[0].innerHTML = this.bottom.getElementsByTagName('span')[0].innerHTML = ~~pageNum + 1;
                    var topAs = this.top.getElementsByTagName('a'),
                     bottomAs = this.bottom.getElementsByTagName('a');
                    if (options.totalPage === 1) {
                        bottomAs[0].className = topAs[0].className = 'first_div_no';
                        bottomAs[1].className = topAs[1].className = 'prev_div_no';
                        bottomAs[2].className = topAs[2].className = 'next_div_no';
                        bottomAs[3].className = topAs[3].className = 'last_div_no';
                    } else if (options.currPage === 0) {
                        bottomAs[0].className = topAs[0].className = 'first_div_no';
                        bottomAs[1].className = topAs[1].className = 'prev_div_no';
                        bottomAs[2].className = topAs[2].className = 'next_div';
                        bottomAs[3].className = topAs[3].className = 'last_div';
                    } else if (options.currPage + 1 === options.totalPage) {
                        bottomAs[0].className = topAs[0].className = 'first_div';
                        bottomAs[1].className = topAs[1].className = 'prev_div';
                        bottomAs[2].className = topAs[2].className = 'next_div_no';
                        bottomAs[3].className = topAs[3].className = 'last_div_no';
                    } else {
                        bottomAs[0].className = topAs[0].className = 'first_div';
                        bottomAs[1].className = topAs[1].className = 'prev_div';
                        bottomAs[2].className = topAs[2].className = 'next_div';
                        bottomAs[3].className = topAs[3].className = 'last_div';
                    }

                    this.tbody.style.display = '';
                    this.loading_bg.style.display = 'none';
                    this.loading.style.display = 'none';

                },
                writeMessage: function (total) {
                    var options = this.defaults,
                     base = total / options.perPage,
                     topSpans = this.top.getElementsByTagName('span'),
                     bottomSpans = this.bottom.getElementsByTagName('span');
                    options.totalPage = base > parseInt(base)
                          ? parseInt(base) + 1
                          : base;
                    bottomSpans[0].innerHTML = topSpans[0].innerHTML = ~~options.currPage + 1;
                    bottomSpans[1].innerHTML = topSpans[1].innerHTML = options.totalPage;
                    bottomSpans[2].innerHTML = topSpans[2].innerHTML = options.perPage;
                    bottomSpans[3].innerHTML = topSpans[3].innerHTML = total;
                },
                sortTable: function (e) {
                    var elem = e.target || e.srcElement,
                     self = this,
                     options = this.defaults,
                     elemName = elem.nodeName.toLowerCase(),
                     showGroup = this.showGroup,
                     tdElem = elem,
                     name = elemName;

                    //拖拽的时候可能会触发一次click 原因是ie下全部绑定在this.table上 代码见拖拽
                    if ($q('td', elem).length > 1)
                        return;
                    if (name !== 'td') {
                        while (name !== 'td') {
                            tdElem = tdElem.parentNode;
                            name = tdElem.nodeName.toLowerCase();
                        }
                    }
                    var issort = checkReg(tdElem.className, 'sort'),
                     type = checkReg(tdElem.className, 'type')

                    //进行排序
                    if (elemName !== 'a' && type) {

                        var frag = doc.createDocumentFragment();
                        if (this.sortColumn !== tdElem && this.sortColumn !== '') {
                            removeClass(this.sortColumn, 'sort-asc');
                            removeClass(this.sortColumn, 'sort-desc');
                        }
                        if (issort) {
                            // 有分组，每组单独取反序  不分组，直接取反序
                            showGroup
                             ? each(this.rows, function (i, o) { o.reverse(); })
                             : this.rows.reverse();
                            tdElem.className = modify(tdElem.className, 'sort', issort === 'asc' ? 'desc' : 'asc');
                        } else {
                            showGroup
                             ? each(this.rows, function (i, o) {
                                 o.sort(self.compare(tdElem.getAttribute('clos'), type));
                             })
                             : this.rows.sort(this.compare(tdElem.getAttribute('clos'), type));

                            // 如果是正序排序，加上正序排列的标志。
                            if (this.ascSort) {
                                addClass(tdElem, 'sort-asc');
                            } else {
                                // 反序排列则将原有排序取反，并加上排序标志
                                showGroup
                                 ? each(this.rows, function (i, o) { o.reverse(); })
                                 : this.rows.reverse();
                                addClass(tdElem, 'sort-desc');
                            }
                        }

                        // 将排序后的数据渲染到表格
                        var insertTrs = this.insertTrs,
                         len = insertTrs.length - 1,
                         arr = [];

                        each(this.rows, function (i, tr) {
                            arr = [insertTrs[len - i]].concat(tr);
                            showGroup
                             ? each(arr, function (idx, obj) { frag.appendChild(obj); })
                             : frag.appendChild(tr);
                        });
                        this.tbody.appendChild(frag);
                        this.sortColumn = tdElem;
                    }

                    //-------------------------------------------------------------------------------------
                    /*
                    如果点击的是表头中的 A 标签，则弹出菜单
                    */
                    if (elemName === 'a') {
                        /*
                         当在菜单外面点击的时候会执行 改函数
                         用于清空 document的 click事件   隐藏层 去掉td,a的样式
                        */
                        function documentClick() {
                            self.popMenu.style.display = 'none';
                            self.subPopMenu.style.display = 'none';
                            if (self.isMenuOpen) {
                                removeListener(document, 'click');
                                removeClass($q('div', self.isMenuOpen)[0], 'theadfocus');
                                $q('a', self.isMenuOpen)[0].style.display = 'none';
                            }
                            self.isMenuOpen = false;
                        }

                        var pos = objPos(elem),
                         left = pos.left + Math.max(document.documentElement.scrollLeft, document.documentElement.scrollLeft),
                         top = pos.top + Math.max(document.documentElement.scrollTop, document.documentElement.scrollTop) + elem.offsetHeight,
                         td = elem.parentNode.parentNode,
                         lis = $q('li', this.popMenu);

                        //如果this.isMenuOpen是真 表示 层是打开状态的  执行关闭相关的处理
                        this.isMenuOpen && documentClick();

                        if (!checkReg(td.className, 'type')) {
                            addClass(lis[0], 'disabled');
                            addClass(lis[1], 'disabled');
                        } else {
                            removeClass(lis[0], 'disabled');
                            removeClass(lis[1], 'disabled');
                        }
                        Sys.ie
                         ? e.cancelBubble = true
                         : e.stopPropagation();
                        //当显示层的时候 吧该td附到this.isMenuOpen上
                        this.isMenuOpen = td;
                        addListener(document, 'click', documentClick);
                        setStyle(this.popMenu, {
                            left: left + 'px',
                            top: top + 'px',
                            display: 'block'
                        });
                    }
                },
                compare: function (n, type) {
                    var sortType = this.defaults.sortType,
                     txt = Sys.ie ? 'innerText' : 'textContent';
                    !sortType[type] && (type = 'string');
                    return function (a1, a2) {
                        a1 = sortType[type](a1.cells[n][txt]);
                        a2 = sortType[type](a2.cells[n][txt]);
                        return a1 == a2 ? 0 : a1 < a2 ? 1 : -1;
                    }
                },
                pageBarClick: function (e) {
                    var elem = e.target || e.srcElement,
                     options = this.defaults,
                     typePage = elem.getAttribute('page'),
                     isGo = elem.getAttribute('go');
                    isDel = elem.getAttribute('del');

                    if (typePage) {
                        var number = {
                            start: 0,
                            end: options.totalPage - 1,
                            next: options.currPage - 1,
                            pre: options.currPage + 1
                        }[typePage];
                        this.toPage(number);
                    }
                    if (isDel) {
                        this.del();
                    }

                    if (isGo) {
                        var number = ~~elem.parentNode.getElementsByTagName('input')[0].value - 1;
                        this.toPage(number);
                    }
                },
                toPage: function (num) {
                    if (typeof num !== 'number' || isNaN(num)) return;
                    var options = this.defaults,
                     self = this,
                     dataConfig = options.dataConfig;
                    //如果请求的分页数小于0就默认为0  如果打越最大分页数 就默认为最大分页数
                    num >= options.totalPage
                     && (num = options.totalPage - 1);
                    num < 0 && (num = 0);

                    //s为当前面板的第一页  e为当前面板的最后
                    var basePage = options.count / options.perPage,
                     s = options.page * basePage,
                     e = s + basePage - 1;
                    this.tbody.style.display = 'none';
                    this.loading_bg.style.display = '';;
                    this.loading.style.display = '';
                    setTimeout(function () { self.buildTbody(num); }, 10);

                },
                del: function () {
                    //做删除的时候需要有主键的索引  我全部保存在tr的
                    var selectedRows = this.selectedRows,
                     arr = []
                    for (var name in selectedRows) {
                        arr.push(selectedRows[name].getAttribute('dataIndex'));
                    }
                    alert('选择了主键值为' + arr.join(','));
                },
                theadOver: function (e) {
                    var elem = e.target || e.srcElement;
                    if (elem.nodeName.toLowerCase() === 'div') {
                        $q('a', elem)[0].style.display = 'block';
                        addClass(elem, 'theadfocus');
                    }
                },
                theadOut: function (e) {
                    var elem = e.target || e.srcElement,
                     toElem = e.toElement || e.relatedTarget,
                     elemName = elem.nodeName.toLowerCase();

                    if (this.isMenuOpen && contains(this.isMenuOpen, elem))
                        return;

                    //如果离开了当前的td 隐藏显示出来的东西
                    if (elemName === 'div' && elem !== this.isMenuOpen) {
                        if (!contains(elem, toElem)) {
                            $q('a', elem)[0].style.display = 'none';
                            removeClass(elem, 'theadfocus');
                        }
                    }

                    if (elemName === 'a' || elemName === 'span' || elemName === 'p') {
                        var parent = elem.parentNode;
                        if (!contains(elem, toElem)) {
                            $q('a', parent)[0].style.display = 'none';
                            removeClass(parent, 'theadfocus');
                        }
                    }
                },
                menuClick: function (e) {
                    var elem = e.target || e.srcElement,
                     className = this.isMenuOpen.className;
                    if (elem.nodeName.toLowerCase() === 'a') {
                        //如果td的样式中不存在type 也就是说不需要排序 则不进行排序 阻止事件冒泡
                        if (!checkReg(className, 'type')) {
                            Sys.ie
                             ? e.cancelBubble = true
                             : e.stopPropagation();
                            return;
                        }

                        //如果a标签 的menuType
                        var menuOp = elem.getAttribute('menuType'),
                         sortOrder = checkReg(className, 'sort');
                        //选择所有列  不进行排序
                        if (menuOp === 'columns')
                            return;
                        /*
                         如果没有排序  就根据menuOp来进行排序
                         如果已排序   且与 menuOp排序方式不同  则进行排序
                        */
                        if (sortOrder) {
                            if (menuOp != sortOrder) {
                                var td = $q('td', this.thead)[this.isMenuOpen.getAttribute('clos')];
                                fireEvent(td, 'click');
                            }
                        } else {
                            this.ascSort = {
                                desc: false,
                                asc: true
                            }[menuOp];
                            var td = $q('td', this.thead)[this.isMenuOpen.getAttribute('clos')];
                            fireEvent(td, 'click');
                        }

                        //完成上面的操作后 设置成正序  因为 之后点别的列 默认还是按正序列来排
                        this.ascSort = true;
                    }
                },
                menuOver: function (e) {
                    var elem = e.target || e.srcElement;
                    if (elem.nodeName.toLowerCase() === 'a' && elem.getAttribute('menuType') === 'columns') {
                        var pos = objPos(elem),
                         left = pos.left + Math.max(document.documentElement.scrollLeft, document.documentElement.scrollLeft) + elem.offsetWidth,
                         top = pos.top + Math.max(document.documentElement.scrollTop, document.documentElement.scrollTop);
                        setStyle(this.subPopMenu, { left: left + 'px', top: top + 'px', display: 'block' });
                    }
                },
                subMenuClick: function (e) {
                    var elem = e.target || e.srcElement,
                     isA = elem.nodeName.toLowerCase() === 'a';
                    Sys.ie
                     ? e.cancelBubble = true
                     : e.stopPropagation();
                    if (isA || elem.nodeName.toLowerCase() === 'input') {
                        var input = isA
                          ? $q('input', elem.parentNode)[0]
                          : elem,
                         clos = input.getAttribute('cols'),
                         self = this;

                        isA
                         && (input.checked = (!input.checked));

                        var checked = input.checked,
                         hideOrShow = checked ? '' : 'none';

                        //如果还剩一列  并且这次是取消选中的
                        //则 不执行隐藏
                        if (this.isShowTrs.num === 1 && !checked) {
                            input.checked = true;
                            return false;
                        }

                        checked
                         ? (this.isShowTrs.num++, this.isShowTrs.clos[clos] = true)
                         : (this.isShowTrs.num--, this.isShowTrs.clos[clos] = false);
                        //如果实现了分组  还必须把组tr的colSpan属性改变
                        this.showGroup
                         && each(this.insertTrs, function (i, tr) {
                             $q('td', tr)[0].setAttribute('colSpan', self.isShowTrs.num);
                         });
                        //显示或隐藏选中列
                        each(this.columns[clos], function (i, o) {
                            o.style.display = hideOrShow;
                        });

                        var width = ~~this.columns[clos][0].getAttribute('width');

                        setTimeout(function () {
                            checked
                             ? self.table.setAttribute('width', ~~self.table.getAttribute('width') + width)
                             : self.table.setAttribute('width', ~~self.table.getAttribute('width') - width)
                        }, 0);
                    }
                },
                rowHighlight: function (e, isHight) {
                    var elem = e.target || e.srcElement,
                     toElem = e.toElement || e.relatedTarget,
                     parent = elem.parentNode;
                    Sys.ie
                     ? e.cancelBubble = true
                     : e.stopPropagation();
                    while (parent.nodeName.toLowerCase() != 'tr') {
                        parent = parent.parentNode;
                    }

                    if (isHight && hasClass(parent, 'rowfocus'))
                        return;
                    //如果是分组的行tr 就返回
                    if (elem.nodeName.toLowerCase() === 'td' && parent.getAttribute('g') === 'y')
                        return;

                    isHight
                     ? addClass(parent, 'rowfocus')
                     : removeClass(parent, 'rowfocus');
                },
                selectRow: function (e) {
                    var elem = e.target || e.srcElement;
                    if (elem.getAttribute('g') || elem.parentNode.getAttribute('g'))
                        return;
                    var self = this,
                     selectedRows = this.selectedRows,
                     lastSelectRow = this.lastSelectRow,
                     cellClick = false,
                     ctrlClick = false,
                     shiftClick = false;
                    if (elem.nodeName.toLowerCase() === 'td') {
                        var parent = elem.parentNode,
                         className = parent.className,
                         options = this.defaults;

                        //按ctrl进行选择
                        if (e.ctrlKey === true) {
                            index = checkReg(className, 'select');
                            //选中那行的如果已经选中了  就取消选中 并且 删除样式
                            //从 this.selectedRows 中删除  设置lastSelectRow={dom:null,index:null
                            if (hasClass(parent, 'trfocus')) {
                                if (index) {
                                    delete selectedRows[index];
                                    removeClass(parent, 'select-' + index);
                                    removeClass(parent, 'trfocus');
                                    lastSelectRow.dom = lastSelectRow.index = null;
                                }
                                ctrlClick = false;
                            } else {
                                selectedRows[++uuid] = parent;
                                addClass(parent, 'trfocus ');
                                addClass(parent, 'select-' + uuid);
                                ctrlClick = true;
                            }
                        }

                        //按住shift进行选择
                        if (e.shiftKey === true) {
                            var lastDom;
                            if (lastSelectRow.dom === null) {
                                shiftClick = true;
                                selectedRows[++uuid] = parent;
                                addClass(parent, 'trfocus ');
                                addClass(parent, 'select-' + uuid);
                            } else {

                                var allRows = [];
                                //如果有分组  个并所有的tr到一个数组
                                this.showGroup
                                 ? each(this.rows, function (i, o) {
                                     allRows = allRows.concat(o);
                                 })
                                 : allRows = this.rows;

                                each(allRows, function (i, o) {
                                    if (parent === o) {
                                        lastDom = { dom: o, index: i }
                                        return false;
                                    }
                                });

                                //清空掉之前所有选中tr的样式
                                each(selectedRows, function (i, o) {
                                    removeClass(o, 'trfocus');
                                    removeClass(o, 'select-' + i);
                                    delete selectedRows[i];
                                });

                                var len = Math.max(lastSelectRow.index, lastDom.index);

                                for (var i = Math.min(lastSelectRow.index, lastDom.index) ; i <= len; i++) {
                                    selectedRows[++uuid] = allRows[i];
                                    addClass(allRows[i], 'trfocus ');
                                    addClass(allRows[i], 'select-' + uuid);
                                }
                            }
                        }

                        //进行单选
                        if (e.ctrlKey === false && e.shiftKey === false) {
                            each(selectedRows, function (i, o) {
                                removeClass(o, 'trfocus');
                                removeClass(o, 'select-' + i);
                                delete selectedRows[i];
                            });
                            selectedRows[++uuid] = parent;
                            addClass(parent, 'trfocus');
                            addClass(parent, 'select-' + uuid);

                            if (parent != lastSelectRow.dom)
                                cellClick = true;
                        }

                        // 点击后记录最后点击的行。
                        if (ctrlClick || cellClick || shiftClick) {
                            var allRows = [];

                            //如果有分组  个并所有的tr到一个数组
                            this.showGroup
                             ? each(this.rows, function (i, o) { allRows = allRows.concat(o); })
                             : allRows = this.rows;

                            //寻找parent的索引
                            each(allRows, function (i, o) {
                                if (o === parent) {
                                    self.lastSelectRow.dom = o;
                                    self.lastSelectRow.index = i;
                                    return false;
                                }
                            });
                        }
                    }
                },
                dragWidth: function (e) {
                    var elem = e.target || e.srcElement;
                    if (elem.nodeName.toLowerCase() === "p") {
                        /*
                         遍历 当前选中的列的 前面所有的列
                         如果没有 或 全部是隐藏的   则返回
                        */

                        for (var i = parseInt(elem.parentNode.parentNode.getAttribute('clos')) - 1; i >= 0; i--)
                            if (this.isShowTrs.clos[i] === true) break;
                        if (i < 0)
                            return;
                        var options = this.defaults,
                         self = this,
                         widthConfig = options.widthConfig,
                         td = elem.parentNode.parentNode;

                        widthConfig.x = e.clientX;
                        widthConfig.td = td;

                        Sys.ie
                         ? this.table.setCapture(false)
                         : e.preventDefault();

                        widthConfig.prevTd = this.columns[i][0];
                        widthConfig.tdWidth = ~~td.width;
                        widthConfig.prevWidth = ~~widthConfig.prevTd.width;
                        var height = Math.min(this.tabContainer.offsetHeight, this.table.offsetHeight),
                         scrollHeight = this.tabContainer.offsetHeight >= this.table.offsetHeight ? 0 : 18,
                         documentScrollLeft = doc.body.scrollLeft;
                        setStyle(this.line, {
                            left: e.clientX + doc.documentElement.scrollLeft + 'px',
                            height: height - scrollHeight + "px",
                            top: objPos(this.tabContainer).top + Math.max(document.documentElement.scrollTop, document.documentElement.scrollTop) + 2 + 'px'
                        });
                        addListener(doc, 'mousemove', bindAsEventListener(this, this.widthMove));
                        addListener(doc, 'mouseup', bindAsEventListener(this, this.widthUp));
                    }
                },
                widthMove: function (e) {
                    win.getSelection
                     ? win.getSelection().removeAllRanges()
                     : doc.selection.empty();
                    var options = this.defaults,
                     widthConfig = options.widthConfig,
                     left = e.clientX,
                     clientX = left,
                     cellMinWidth = options.cellMinWidth;
                    if (clientX > widthConfig.x && e.clientX - widthConfig.x > widthConfig.tdWidth - cellMinWidth) {
                        left = widthConfig.x + widthConfig.tdWidth - cellMinWidth;
                    }

                    if (clientX < widthConfig.x && widthConfig.x - clientX > widthConfig.prevWidth - cellMinWidth) {
                        left = widthConfig.x - widthConfig.prevWidth + cellMinWidth;
                    }

                    setStyle(this.line, {
                        left: left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) + "px",
                        display: "block"
                    });
                },
                widthUp: function (e) {
                    this.line.style.display = 'none';
                    var widthConfig = this.defaults.widthConfig,
                     x = parseInt(this.line.style.left) - Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft) - widthConfig.x;
                    widthConfig.prevTd.width = ~~widthConfig.prevWidth + x;
                    widthConfig.td.width = ~~widthConfig.tdWidth - x;
                    Sys.ie && this.table.releaseCapture();
                    removeListener(doc, 'mousemove');
                    removeListener(doc, 'mouseup');
                },
                createInput: function (i, obj, parent) {
                    var etd = $c('td', parent),
                     input = $c('input', etd),
                     type = obj.edit;
                    etd.width = obj.width
                    input.type = 'text';
                    input.setAttribute('index', i);
                    !type
                     && input.setAttribute('readonly', 'readonly')
                    etd.appendChild(input);
                    input.className = 'x-form-text i_a';
                    setStyle(input, {
                        width: obj.width - 1 + 'px',
                        background: 'white'
                    });
                },
                editRow: function (e) {
                    var elem = e.target || e.srcElement,
                     self = this,
                     options = this.defaults,
                     nodeName = elem.nodeName.toLowerCase();
                    if (nodeName !== 'td') {
                        while (elem.nodeName.toLowerCase() !== 'td') {
                            elem = elem.parentNode;
                        }
                    }
                    var tr = elem.parentNode;
                    this.currentEditRow.index = tr.getAttribute('dataindex');
                    this.currentEditRow.dom = tr;
                    if (tr.getAttribute('g'))
                        return;
                    var sTop = ~~this.tabContainer.scrollTop,
                     sLeft = ~~this.tabContainer.scrollLeft,
                     cTds = $q('td', tr);
                    pTds = $q('td', $q('tr', this.editTable)[0]),
                    txt = Sys.ie ? 'innerText' : 'textContent';
                    setStyle(this.editForm, {
                        top: tr.offsetTop + 'px',
                        left: tr.offsetLeft + 'px',
                        display: ''
                    });
                    each(cTds, function (i, td) {
                        $q('input', pTds[i])[0].value = td[txt];
                    });
                },
                modifyTr: function (e) {
                    var elem = e.target || e.srcElement;
                    if (elem.nodeName.toLowerCase() === 'a') {
                        var tds = $q('td', this.editTable),
                         txt = txt = Sys.ie ? 'innerText' : 'textContent',
                         isC = false;
                        if (elem.getAttribute('do') === 'submit') {
                            alert('索引为' + this.currentEditRow.index)
                        }
                        this.editForm.style.display = 'none';
                    }
                }
            });
        })(document);
        window.onload = function () {
            var data = {
                //total:'55',
                data: []
            }
            var s = '阿斯达三大散打三个而个呃 奋斗个我是地方我师父 威尔 地方威尔威尔威尔 豆腐干 沃尔与体育 56  范甘迪威尔 请问额请问散阿萨德b你吗 吗吗 阿斯 zweas dqwesdf 阿凡达散打有人6 斯蒂芬与',
             b = ['人民币', '欧元', '美元'],
             n = ['张三', '李四', '王五', '赵六', '陈七', '猪八']

            each(new Array(3000), function (i, o) {
                data.data.push([i + 1, n[i % 5] + i, (i % 3 === 0 ? '-' : '') + parseInt(Math.random() * 1000), b[i % 2], '1984-05-27', s.substring(Math.random() * 10, Math.random() * 10 + 15)])
            });
            data5 = {
                total: 11,
                data: [
                 {
                     groupName: '平安银行',
                     rows: [
                      [1, '平安银行一张同-账单', '-29792.66', '日元', '1928-06-15', '一般'],
                      [2, '平安银行信用卡-账单', '26268.99', '欧元', '1950-04-14', '一般'],
                      [3, '平安银行基金-账单', '-84149.12', '英磅', '1927-05-08', '一般'],
                      [4, '平安银行信用卡-账单', '23782.40', '欧元', '1995-01-05', '一般'],
                      [5, '平安银行国债-账单', '-48355.53', '人民币', '1953-07-01', '很好'],
                      [6, '平安银行信用卡-账单', '14922.48', '人民币', '1954-08-04', '一般'],
                      [7, '平安银行信用卡-账单', '87252.78', '人民币', '1956-10-01', '很好'],
                      [8, '平安银行基金-账单', '-67287.72', '英磅', '1948-02-24', '一般'],
                      [9, '平安银行基金-账单', '-51724.44', '美元', '1943-09-11', '很差']
                     ]
                 },
                 {
                     groupName: '交通银行',
                     rows: [
                      [151, '交通银行一张同-账单', '23062.39', '英磅', '1959-01-03', '一般'],
                      [152, '交通银行信用卡-账单', '10634.01', '英磅', '1967-09-23', '很好'],
                      [153, '交通银行基金-账单', '-69832.32', '美元', '2000-06-07', '很差'],
                      [154, '交通银行信用卡-账单', '-22260.14', '英磅', '1999-05-27', '很差'],
                      [155, '交通银行国债-账单', '92868.28', '英磅', '1911-01-03', '一般'],
                      [156, '交通银行信用卡-账单', '77059.80', '英磅', '1990-08-03', '一般']
                     ]
                 },
                 {
                     groupName: '渣打银行',
                     rows: [
                      [182, '渣打银行一张同-账单', '26046.45', '英磅', '1923-01-22', '很好'],
                      [183, '渣打银行信用卡-账单', '-57036.21', '欧元', '1974-04-20', '很差']
                     ]
                 },
                 {
                     groupName: '浦发银行',
                     rows: [
                      [218, '渣打银行信用卡-账单', '51027.86', '日元', '1970-01-08', '很好'],
                      [219, '渣打银行基金-账单', '-58048.75', '英磅', '1948-02-12', '一般'],
                      [220, '渣打银行信用卡-账单', '-79938.95', '欧元', '1957-11-22', '很差'],
                      [221, '渣打银行国债-账单', '-65972.99', '欧元', '1953-07-01', '很差'],
                      [222, '渣打银行信用卡-账单', '44483.17', '欧元', '2000-06-11', '一般']
                     ]
                 },
                 {
                     groupName: '招商银行',
                     rows: [
                      [238, '招商银行信用卡-账单', '77695.90', '美元', '1919-09-20', '很好'],
                      [239, '招商银行信用卡-账单', '52517.41', '欧元', '1921-11-12', '很好'],
                      [240, '招商银行基金-账单', '-45174.21', '欧元', '1949-03-08', '很差'],
                      [241, '招商银行信用卡-账单', '-60409.65', '英磅', '1950-04-02', '一般'],
                      [242, '招商银行国债-账单', '32741.68', '美元', '2005-11-17', '很差']
                     ]
                 },
                 {
                     groupName: '农业银行',
                     rows: [
                      [430, '农业银行一张同-账单', '23474.59', '日元', '1983-01-13', '一般'],
                      [431, '农业银行信用卡-账单', '-64526.95', '日元', '1952-06-10', '很好'],
                      [432, '农业银行基金-账单', '49975.19', '美元', '1975-05-18', '一般']
                     ]
                 }
                ]
            }
            function xx(v) {
                return ~~v < 0
                 ? '<span class="greed">' + v + '</span>'
                 : '<span class="red">' + v + '</span>'
            }

            new easyGrid({
                container: $$('demo'),
                //主键名  删除 编辑 的时候 需要这个东西
                primaryKey: 'id',
                fields: [
                 { name: '序号', param: 'id', type: 'int', width: '100' },
                 { name: '名称', param: 'name', type: 'string', edit: 'edit', width: '140' },
                 { name: '余额', param: 'money', type: 'float', edit: 'edit', render: xx, width: '100' },
                 { name: '币种', param: 'type', type: 'string', edit: 'edit', width: '100' },
                 { name: '日期', param: 'date', type: 'date', edit: 'edit', width: '100' },
                 { name: '备注', param: 'note', type: 'string', width: '255' }
                ],
                dataConfig: data,
                //一页有多少条
                perPage: 1000,
                //当前在第几页
                currPage: 0,
                //一共多少页
                totalPage: 0,
                //一次请求多少条数据
                count: 2000,
                //第几版数据
                page: 0
            });

            easyGrid.prototype.options.sortType.cp = function (v) {
                if (v === '很好')
                    return 3
                if (v === '一般')
                    return 2
                if (v === '很差')
                    return 1
            }
            new easyGrid({
                container: $$('demo1'),
                //主键名  删除 编辑 的时候 需要这个东西
                primaryKey: 'id',
                fields: [
                 { name: '序号', param: 'id', type: 'int', width: '100' },
                 { name: '名称', param: 'name', type: 'string', edit: 'edit', width: '140' },
                 { name: '余额', param: 'money', type: 'float', edit: 'edit', render: xx, width: '100' },
                 { name: '币种', param: 'type', type: 'string', edit: 'edit', width: '100' },
                 { name: '日期', param: 'date', type: 'date', edit: 'edit', width: '100' },
                 { name: '备注', param: 'note', type: 'cp', width: '255' }
                ],
                dataConfig: data5,
                //一页有多少条
                perPage: 20,
                //当前在第几页
                currPage: 0,
                //一共多少页
                totalPage: 0,
                //一次请求多少条数据
                count: 2000,
                //第几版数据
                page: 0
            });

        };
    </script>
</body>
</html>
